
<!DOCTYPE html>
<html>
<head>
    <title>ByteDance</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta name="description" content="ByteDance's content platforms enable people to enjoy content powered by AI technology. We inform, entertain, and inspire people across language, culture and geography."/>
    <link href="/static/css/a.css" rel="stylesheet"><link href="/static/css/b.css" rel="stylesheet"><link href="/static/css/c.css" rel="stylesheet"></head>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
    body {
        background: url("/static/images/background.png") no-repeat;
        width: 100%;
        height: 100%;
        background-size: 100%;
    }
    table tr:nth-child(even){
        background: #ccc;
    }
    table thead tr  {
        background: #ccc;
    }
</style>
<body>

<header class="app-header">
    <div class="header-logo"><img class="logo-img" src="/static/images/2.png"/></div>
    <div class="header-tab">
        <ul class="header-tab-ul">
            <li class="header-tab-ul-li -js-tab" data-category="home" data-show="earth">
                <a class="header-tab-ul-a" href="one.html">主页</a>
            </li>
            <li class="header-tab-ul-li li-about -js-tab -js-header-about-tab" data-category="about">
                <a class="header-tab-ul-a" href="#">图片</a>
                <div class="header-tab-mask"></div>
                <div class="header-tab-list -js-header-about-list">

                    <a href="#" data-about-tab="0" data-type="1" class="header-tab-item -js-about-tab-a -js-about-tab-a-0 btn" >图片一级</a>
                    <a href="#" data-about-tab="-1" data-type="2" class="header-tab-item -js-about-tab-a -js-about-tab-a-1 btn" >图片二级</a>
                    <a href="#" data-about-tab="-2" data-type="3" class="header-tab-item -js-about-tab-a -js-about-tab-a-2 btn" >图片三级</a>


                </div>
            </li>
            <li class="header-tab-ul-li li-technology -js-technology" data-category="technology">
                <a class="header-tab-ul-a" href="#">视频</a>
                <div class="header-tab-mask"></div>
                <div class="header-tab-list">
                    <a href="#" data-type="4" class="header-tab-item -js-ai-tab btn">视频一级</a>
                    <a href="#" data-type="5" class="header-tab-item -js-ailab-tab btn">视频二级</a>
                    <a href="#" data-type="6" class="header-tab-item -js-product-tab btn">视频三级</a>
                </div>
            </li>
            <li class="header-tab-ul-li li-newsroom -js-newsroom" data-category="newsroom">
                <a class="header-tab-ul-a" href="#">文字</a>
                <div class="header-tab-mask"></div>
                <div class="header-tab-list">
                    <a href="#" data-type="7" class="header-tab-item -js-expert-tab btn">文字一级</a>
                    <a href="#" data-type="8" class="header-tab-item -js-duty-tab btn">文字二级</a>
                    <a href="#" data-type="9" class="header-tab-item -js-news-tab btn">文字三级</a>
                </div>
            </li>
            <li class="header-tab-ul-li li-newsroom -js-newsroom" data-category="newsroom">
                <a class="header-tab-ul-a" href="#">语音</a>
                <div class="header-tab-mask"></div>
                <div class="header-tab-list">
                    <a href="#" data-type="10" class="header-tab-item -js-expert-tab btn">语音一级</a>
                    <a href="#" data-type="11" class="header-tab-item -js-duty-tab btn">语音二级</a>
                    <a href="#" data-type="12" class="header-tab-item -js-news-tab btn">语音三级</a>
                </div>
            </li>
            <li class="header-tab-ul-li li-newsroom -js-newsroom" data-category="newsroom">
                <a class="header-tab-ul-a" href="#">加权分</a>
                <div class="header-tab-mask"></div>
                <div class="header-tab-list">
                    <a href="#" data-type="13" class="header-tab-item -js-expert-tab all_btn">图片</a>
                    <a href="#" data-type="14" class="header-tab-item -js-duty-tab all_btn">视频</a>
                    <a href="#" data-type="15" class="header-tab-item -js-news-tab all_btn">文字</a>
                    <a href="#" data-type="16" class="header-tab-item -js-news-tab all_btn">语音</a>
                </div>
            </li>
            <li class="header-tab-ul-li -js-career" data-category="career">
                <a class="header-tab-ul-a" href="second.html">人物画像</a>
            </li>
        </ul>
    </div>
</header>

<div class="app-line"></div>
<div class="app-earth -js-show -js-show-earth"></div>

<table class="table table-bordered" id="app">

    <thead>
    <tr>
        <th>姓名</th>
        <th>项目负责人</th>
        <th>正在进行的项目</th>
        <th>是否可调动</th>
        <th>分值</th>
    </tr>
    {% for story in qry %}
    <tr>
        <td>{{story.oname}}</td>
        <td>{{story.opm}}</td>
        <td>{{story.opming}}</td>
        <td>{{story.omove}}</td>
        <td>{{story.isDelete}}</td>
    </tr>
    {% endfor %}

    <tr>
        <th>姓名</th>
        <th>一级综合</th>
        <th>二级综合</th>
        <th>三级综合</th>
        <th>业务素质平均</th>
        <th>加权分</th>
    </tr>
    {% for story in qry1 %}
    <tr>
        <td>{{story.name}}</td>
        <td>{{story.oneavg}}</td>
        <td>{{story.twoavg}}</td>
        <td>{{story.threeavg}}</td>
        <td>{{story.ywszavg}}</td>
        <td>{{story.jqf}}</td>
    </tr>
    {% endfor %}
    </thead>
    <tbody id="dataView">

    </tbody>
</table>
<script src="/static/libs/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="/static/js/a.js"></script>
<script type="text/javascript" src="/static/js/b.js"></script>
<script type="text/javascript" src="/static/js/c.js"></script>
<script type="text/javascript" src="/static/js/d.js"></script>
<script type="text/javascript" src="/static/js/demo.js"></script>
</body>
<script>
    var ResponseData = [
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
         {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        {"name": "A同学", "project": "roup", "image":"张颖","control":"是","price":85,"index":8},
        
        


    ];

    $(function () {
        var page = new Object();
        page.title1 = ["姓名","项目负责人","正在进行的项目","是否可调动","分值"];
        page.title2 = ["姓名","一级综合","二级综合","三级综合","业务素质平均","加权分"];
        function update_table_title(title_array){
            for(var i=0;i<title_array.length;i++){
                $("#app th:eq("+i+")").text(title_array[i])
            }
        }

        $(".btn").click(function () {
            update_table_title(page.title1);
            dataShowControl(this);
        });
        $(".all_btn").click(function () {
            update_table_title(page.title2);
            dataShowControl(this);
        });
//后台数据库公式嵌套
        function sort(array) {
            var  temp = 0;
            var i, j, insertNote;// 要插入的数据
            for (i = 1; i < array.length; i++) {// 从数组的第二个元素开始循环将数组中的元素插入
                insertNote = array[i];// 设置数组中的第2个元素为第一次循环要插入的数据
                j = i - 1;
                while (j >= 0 && insertNote.price > array[j].price) {
                    array[j + 1] = array[j];// 如果要插入的元素小于第j个元素,就将第j个元素向后移动
                    j--;
                }
                array[j + 1] = insertNote;// 直到要插入的元素不小于第j个元素,将insertNote插入到数组中
            }
            console.log("result",array);
            return array;
        }

        function dataShowControl(index) {
            $("#dataView").empty();
            var data_Type = $(index).attr("data-type");
            console.log(data_Type)
            /*$.ajax({
             url: url,
             type: "post",
             async: false,
             dataType: dataType,
             success: function (data) {
             ResponseData = data;
             },
             error: function (e) {
             console.log("错误原因:" + e);
             }
             });*/

            ResponseData = sort(ResponseData);
            for(var i=0;i<ResponseData.length;i++){
                console.log(data_Type)
                if(ResponseData[i].index == data_Type){
                    $("#dataView").append("<tr><td>"+ ResponseData[i].name  +"</td><td>"+ ResponseData[i].image  +"</td><td>"+ ResponseData[i].project  +"</td><td>"+ ResponseData[i].control  +"</td><td>"+ ResponseData[i].price  +"</td></tr>")
                }
            }
        }
    })
</script>
</html>